<template>
  <div class="messages">
    <van-nav-bar title="消息"> </van-nav-bar>
    <van-pull-refresh
      v-if="state.isLogin"
      v-model="state.loading"
      @refresh="onRefresh"
      style="padding: 10px; margin-bottom: 50px; min-height: 90vh"
    >
      
      
     
     <div v-if="this.userList[0]!=undefined">

 

        <van-swipe-cell  v-for="(user, index) in userList"  :key="user.contract.userId" >
          <div class="message-item" @click="gotoMessage(index)">
            <van-image
              round
              width="56px"
              height="56px"
              :src="user.contract.userImg"
            ></van-image>
            <div style="margin-left: 10px">
              <div class="name">
                <p class="p">{{ user.contract.userName  }}</p>
                <!-- <van-tag plain type="primary" round>{{
                  user.docLocation[3].name
                }}</van-tag> -->
              </div>
              <div class="tag">[点击进入查看看详情]</div>
            </div>
            <div class="date">{{ user.time }}</div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
     </div>

     
   
    
  
        <van-empty description="还没有消息"   v-else/>
   
    </van-pull-refresh>
    <van-empty v-else description="未登录">
      <van-button round type="success" class="bottom-button" @click="gotoLogin"
        >登录</van-button
      >
    </van-empty>
    <van-tabbar route>
      <van-tabbar-item icon="wap-home-o" to="/index">主页</van-tabbar-item>
      <van-tabbar-item icon="chat-o" to="/messages">消息</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/home"> 我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
// @ is an alias to /src
import { defineComponent, reactive, ref, computed } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { userList } from "../api/user";
import { Toast } from "vant";
export default defineComponent({
  name: "Index",
  components: {},

  created() {

 
    //session 中取 用户信息
    this.state.userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (this.state.userInfo) {
      this.getUserList();
      this.state.isLogin = true;
    } else {
      this.state.isLogin = false;
    }
  },

  setup() {
    //实例化路由
    const router = useRouter();
    //实例化 VueX
    const store = useStore();

    ///===========================
    //去医生信息
    const gotoMessage = (id) => {
      store.commit("setCurrentUserId", id);
      router.push({
        path: `/message/${id}`,
      });
    };

    const active = ref(0);
    //下拉刷新 状态
    const state = reactive({
      loading: false,
      isLogin: false,
    });

    //下拉刷新 回调
    const onRefresh = () => {
      getUserList();
    };

    const getUserList = () => {
      userList().then((res) => {
        store.commit("getUserList", JSON.stringify(res.data.data));
        state.loading = false;
      });
    };

    //去登陆
    const gotoLogin = () => {
      router.push("/login");
    };
    return {
      state,
      onRefresh,
      gotoMessage,
      // ==========================
      userList: computed(() => store.state.userList),
      getUserList,
      gotoLogin,
    };
  },
});
</script>


<style>
.messages {
  text-align: left;
}
.delete-button {
  height: 100%;
  margin-left: 10px;
}
.message-item {
  display: flex;
  align-items: center;
  position: relative;
  border-bottom: 1px solid #ebedf0;
  padding: 10px;
}
.message-item .name {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 5px;
}
.message-item .name .p {
  margin: 0;
  padding: 0;
  margin-right: 10px;
  font-size: 16px;
  font-weight: bold;
}
.message-item .date {
  position: absolute;
  right: 0;
  top: 0;
  color: #ebedf0;
  font-size: 13px;
  color: rgba(69, 90, 100, 0.6);
}
.message-item .tag {
  color: rgba(69, 90, 100, 0.6);
}
.bottom-button {
  width: 160px;
  height: 40px;
}
</style>